<breadcrumb></breadcrumb>

<mat-card>
  <div class="demo-menu">

    <section>
      <h2>Icon Trigger</h2>
      <mat-menu #menu1="matMenu">
        <button mat-menu-item> Settings </button>
        <button mat-menu-item> Help </button>
      </mat-menu>

      <button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Open Menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </section>

    <section>
      <h2>Menu with Icons</h2>
      <button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Open Menu">
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #menu2="matMenu">
        <button mat-menu-item>
          <mat-icon>dialpad</mat-icon>
          <span>Redial</span>
        </button>
        <button mat-menu-item>
          <mat-icon>voicemail</mat-icon>
          <span>Check voicemail</span>
        </button>
        <button mat-menu-item>
          <mat-icon>notifications_off</mat-icon>
          <span>Disable alerts</span>
        </button>
      </mat-menu>
    </section>

    <section>
      <h2>Menu with links</h2>
      <button mat-icon-button [matMenuTriggerFor]="menu3" aria-label="Learn more about Angular">
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #menu3="matMenu">
        <a href="http://angular.io" mat-menu-item>
          Angular
        </a>
        <a href="http://material.angular.io" mat-menu-item>
          Angular Material
        </a>
      </mat-menu>
    </section>

  </div>
</mat-card>